<!--
 * @Date: 2025-03-31 15:38:12
 * @LastEditTime: 2025-04-07 15:20:21
 * @FilePath: \LeagueBard\frontend\src\views\tools\toolItem\autoSelect.vue
 * @Description: 工具项 - 自动选择英雄（匹配、大乱斗）
-->
<script lang="ts" setup>
import { useAppStore } from '@/stores/app'
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import SelectDialog from '../components/selectChampion.vue';

const { t } = useI18n()

// 获取store
const autoSelect = useAppStore().tools.autoSelect

const autoSelectFlag = computed(() => {
  return autoSelect?.flag || false
})
// 开关
function switchAutoSelect(val) {
  autoSelect.flag = val
}

const SelectDialogRef = ref(null)

// 匹配
const classicChampion = computed(() => {
  return autoSelect?.CLASSIC || []
})
function selectClassicChampion() {
  SelectDialogRef.value.init(classicChampion.value).then((selected) => {
    autoSelect.CLASSIC = selected
  })
}

// 大乱斗
const aramChampion = computed(() => {
  return autoSelect?.ARAM || []
})
function selectAramChampion() {
  SelectDialogRef.value.init(aramChampion.value).then((selected) => {
    autoSelect.ARAM = selected
  })
}
</script>

<template>
  <a-collapse-item key="autoSelect" class="auto_select" :header="t(`Tools.BanPick.autoSelect`)">
    <template #extra>
      <a-switch v-model="autoSelectFlag" type="round" @click.stop="() => { }" @change="switchAutoSelect">
        <template #checked>{{ t(`Tools.ON`) }}</template>
        <template #unchecked>{{ t(`Tools.OFF`) }}</template>
      </a-switch>
    </template>
    <!-- 匹配模式 -->
    <div class="config_item flex items-center justify-between">
      <div class="title">{{ t(`MatchHistoryModes.q_430`) }}</div>
      <div class="champion_list">{{ classicChampion }}</div>
      <a-space class="button flex justify-end">
        <a-button type="dashed" @click="selectClassicChampion">{{ t(`Tools.BanPick.selectChampion`) }}</a-button>
      </a-space>
    </div>
    <!-- 大乱斗模式 -->
    <div class="config_item flex items-center justify-between">
      <div class="title">{{ t(`MatchHistoryModes.q_450`) }}</div>
      <div class="champion_list">{{ aramChampion }}</div>
      <a-space class="button flex justify-end">
        <a-button type="dashed" @click="selectAramChampion">{{ t(`Tools.BanPick.selectChampion`) }}</a-button>
      </a-space>
    </div>
  </a-collapse-item>

  <SelectDialog ref="SelectDialogRef" />
</template>

<style lang="scss" scoped>
.auto_select {

  .title,
  .button {
    width: 300px;
    display: flex;
  }

  .config_item {
    &+.config_item {
      margin-top: 10px;
    }
  }

  .champion_list {
    width: 300px;
    height: 35px;
    display: flex;
    align-items: center;
    background-color: var(--module-bg-color);
  }
}
</style>
